<template>
    <div
        :class="['flex-items-box my-10', { 'justify-end': type === 'right' }]"
        :style="{ 'width': type === 'full' ? '100%' : 'calc(50% - 10px)' }"
    >
        <!-- 表单搜索条件标题 -->
        <template v-if="title">
            <span class="search-title">{{ title }}：</span>
        </template>
        <!-- 表单 -->
        <div class="flex-1">
            <slot/>
        </div>
    </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
    // 表单标题
    title: string
    // 表单位置类型
    type: 'left' | 'right' | 'full'
}>(), {
    title: '',
    type: 'left'
})
</script>

<style scoped>
.search-left{
    width: calc(50% - 10px);
    @apply flex items-center my-10;
}

.search-right{
    width: calc(50% - 10px);
    @apply flex justify-end items-center my-10;
}

.search-title{
    width: 75px;
}
</style>
